<template>
    <n-tabs class="h-full flex-1 tabs" type="line" animated>
        <n-tab-pane name="basic" tab="基础配置" class="flex:1">
            <basic :id = "id"/>
        </n-tab-pane>
        <n-tab-pane name="pay" tab="支付配置">
            <pay :id = "id"/>
        </n-tab-pane>

        <n-tab-pane name="customize" tab="自定义菜单配置">
            <customize :id = "id"/>
        </n-tab-pane>

        <n-tab-pane v-if="info.type!==4 && info.isAuthenticated" class="h-full" name="material" tab="素材库">
            <material  :id = "id"/>
        </n-tab-pane>

        <n-tab-pane v-if="info.type!==4" class="h-full"  name="concern" tab="关注回复">
            <concern :id = "id"/>
        </n-tab-pane>

        <n-tab-pane v-if="info.type!==4" class="h-full"  name="keyword" tab="关键词回复">
            <keyword :id = "id"/>
        </n-tab-pane>

        <n-tab-pane v-if="info.type!==4" class="h-full"  name="default" tab="默认回复">
            <default :id = "id"/>
        </n-tab-pane>

        <n-tab-pane class="h-full" name="user" tab="用户管理">
            <user :id = "id"/>
        </n-tab-pane>
        <n-tab-pane v-if="info.enable" name="other" tab="其他配置">
            <other :id = "id"/>
        </n-tab-pane>
    </n-tabs>
</template>

<script setup lang="ts">
import Basic from "../config-modal/cpns/basic.vue";
import Pay from "../config-modal/cpns/pay.vue";
import User from "../config-modal/cpns/user/index.vue";
import Other from "../config-modal/cpns/other.vue";
import Material from "../config-modal/cpns/material.vue";
import Concern from "./cpns/concern/index.vue";
import Keyword from "./cpns/keyword/index.vue";
import Default from "./cpns/default/index.vue";
import Customize from "./cpns/customize.vue";
import {onMounted} from "vue";

const props = withDefaults(
    defineProps<{
        id: string,
        info:any
    }>(),
    {
        id: '',
    }
)

onMounted(() => {
    console.log(props.info)
})

</script>

<style scoped>
.tabs:deep(.n-tabs-pane-wrapper){
    height: 100% !important;
}
</style>